<template>
	<view class="p20 ">
		<view class="bg-zs h132 radius20 pr mb20">
			<image src="/static/img/order/title_bg.png" class="wh-max" mode=""></image>
			<view class="pa w-max h-max left0 top0 pl30 flex ">
				<image src="/static/img/order/daifuwu.png" class="w60 h60 mr14" mode=""></image>
				<view class="color-fff">
					<view class="">{{data.status_text||data.status}}</view>
					<view class="fs26 mt10">您的订单还未开始服务</view>
				</view>
			</view>
		</view>
		<view class="radius20 p24 bg-fff ">
			<view class="fs30 mb12 tit-ac">
				<text>订单信息</text>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">服务项目</view>
				<view class="">{{data.service_name}}</view>
			</view>
			<view class="flex row-between pt12 pb12" v-if="data.order_sn">
				<view class="color-999">订单编号</view>
				<view class="">{{data.order_sn}}</view>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">下单时间</view>
				<view class="">{{data.add_time}}</view>
			</view>
		</view>
		<view class="radius20 p24 bg-fff mt20">
			<view class="fs30 mb12 tit-ac">
				<text>预约信息</text>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">期望就诊时间</view>
				<view class="">{{data.expect_time}}</view>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">就诊医院</view>
				<view class="">{{data.hospital}}</view>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">科室</view>
				<view class="color-zs">{{data.department}}</view>
			</view>
			<view class="flex row-between pt12 pb12" v-if="data.name">
				<view class="color-999">就诊人</view>
				<view class="">{{data.name}}</view>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">就诊人电话</view>
				<view class="">{{data.phone}}</view>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">就诊人身份证号</view>
				<view class="">{{data.card_no}}</view>
			</view>
			<view class="flex row-between pt12 pb12" v-if="data.mobile">
				<view class="color-999">预约人电话</view>
				<view class="">{{data.mobile}}</view>
			</view>
			<view class="flex row-between pt12 pb12">
				<view class="color-999">服务需求</view>
				<view class="">{{data.remarks}}</view>
			</view>
		</view>
		<block v-if="data.type==0">
			<view class="text-center mt40">
				<text>客户期望报价：</text>
				<text class="color-red fs30">{{data.expect_price}}</text>
				<text class="color-red">元</text>
			</view>
			<view class="color-999 fs26 mt30">
				<text class="color-red">*</text>
				<text>参考客户期望报价进行报价，更容易被雇佣，请合理提交报价</text>
			</view>
		</block>

		<view class="radius20 p24 bg-fff mt20" v-if="data.status==4">
			<view class="fs30 pb12 pr">
				<text>确认码在客户手机短信中</text>
			</view>
			<view class="color-zs">填写确认码：</view>
			<view class="flex">
				<u-message-input @change="e=>verify_code=e" :maxlength="6" breathe></u-message-input>
			</view>
		</view>

		<view class="h120"></view>
		<view class="fixed bottom0 left0 w-max bg-fff flex ">
			<view class="flex1 p20" v-if="data.type==0">
				<u-button type="warning" ripple @click="baojiaShow=true">
					{{data.offer_price*1?'我已报价'+data.offer_price:'立即报价'}}
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.type==1">
				<u-button type="error" ripple @click="receive">
					抢单￥{{data.pay_price}}
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.type==2">
				<u-button type="error" ripple @click="receive">
					接单￥{{data.pay_price}}
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.type==3">
				<u-button type="error" ripple plain disabled @click="">已被抢走</u-button>
			</view>

			<view class="flex1 p20" v-if="data.status==2">
				<u-button type="warning" ripple @click="signin">立即签到</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==4">
				<u-button type="warning" ripple @click="verify">提交核销</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==7">
				<u-button type="warning" ripple @click="$u.route('/pages/order/evaluate',this.$params)">查看评价</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==3">
				<u-button type="" ripple @click="del">删除订单</u-button>
			</view>

		</view>

		<u-popup mode="center" v-model="baojiaShow" width="650" borderRadius="32" closeable>
			<view class="p34">
				<view class="fs32 fw-w tc pb20">{{data.offer_price*1?'修改报价':'立即报价'}}</view>
				<u-form-item label="金额" :borderBottom="false">
					<u-input inputAlign="right" v-model="offerForm.offer_price" placeholder="请输入报价金额" />
				</u-form-item>
				<view class="color-999 fs26 ">
					<text class="color-red">*</text><text>客户期望报价：</text>
					<text class="color-red fs30">{{data.expect_price}}</text>
					<text class="color-red">元</text>
				</view>
				<view class="mt20 p20 bg-f8f radius16" style="border: dashed 2rpx #cfcfcf;">
					<u-input type="textarea" v-model="offerForm.remarks" placeholder="如有特殊要求您可以留言给客户进行说明" />
				</view>
				<view class="h20"></view>
				<u-button type="warning" ripple @click="offer">提交</u-button>
			</view>
		</u-popup>

		<u-popup mode="center" v-model="qiangShow" width="550" borderRadius="32" closeable>
			<view class="p34 flex-col col-center">
				<view class="fs32 fw-w  pb20">抢单成功</view>
				<view class="fs30">您可以在订单-待服务中查看</view>
				<view class="h40"></view>
				<view class="mauto-x w204">
					<u-button type="warning" ripple>知道了</u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baojiaShow: false,
				qiangShow: false,
				data: '',

				verify_code: '', //确认码

				offerForm: { //报价
					offer_price: '',
					remarks: '',
				},
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$request('/master/index/details', this.$params).then(res => {
					this.data = res.data
				})
			},
			offer() { //立即报价
				this.offerForm.order_id = this.$params.order_id
				this.$request('/master/index/offer', this.offerForm).then(res => {
					this.$msg(res.msg)
					this.baojiaShow = false
					this.getData()
				})
			},
			receive() { //接单/抢单
				this.$request('/master/index/receive', this.$params).then(res => {
					this.$msg(res.msg)
					this.baojiaShow = false
					this.getData()
				})
			},
			signin() { //签到
				this.$showModal("签到").then(res => {
					this.$request('/master/task/signin', this.$params).then(res => {
						this.$msg(res.msg)
						this.getData()
					})
				})
			},
			del() { //删除订单
				this.$showModal("删除订单").then(res => {
					this.$request('/master/order/delete', this.$params).then(res => {
						this.$msg(res.msg)
						this.getData()
					})
				})
			},
			verify() { //提交核销
				let params = {
					...this.$params,
					verify_code: this.verify_code
				}
				if (!params.verify_code) return this.$msg('请填写确认码')
				this.$request('/master/order/verify', params).then(res => {
					this.$msg(res.msg)
					this.getData()
				})
			},
		}
	}
</script>

<style lang="scss">

</style>
